<template>
  <el-row>
    <el-row>
      <el-col :span="24">
        <el-col :span="20">
          <el-page-header @back="goBack" :content="title_content"></el-page-header>
        </el-col>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <el-row v-loading="saveLoading">
      <el-col :span="11">
        <el-row class="uplold">
          <el-col :span="24" class="row">
            <el-card class="box-card" shadow="never">
              <div v-if="TimgList.length <= 0" style="text-align: center;font-size: 15px;color: #8c939d">暂无添加任何文件</div>
              <div slot="header" class="clearfix">
                <span>任务附件</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="allFileDown('1')">全部下载</el-button>
              </div>
              <!--        图片-->
              <ul class="el-upload-list el-upload-list--picture-card">
                <span v-for="img in TimgList">
            <el-tooltip
              class="item"
              effect="light"
              :hide-after="2000"
              :content="img.name"
              placement="bottom-start">
            <li tabindex="0" class="el-upload-list__item is-ready"
                v-if="img.type=='jpg'|img.type=='png'|img.type=='jpeg'">
              <img class="el-upload-list__item-thumbnail" :src="img.url">
              <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="imgCheck(img.url)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span class="el-upload-list__item-delete" @click="imgDonwload(img.url)">
                    <i class="el-icon-download"></i>
                  </span>
              </span>
            </li></el-tooltip>
          </span>
              </ul>
              <!--        文件file-->
              <span class="file_card">
            <ul class="el-upload-list el-upload-list--picture-card">
              <span v-for="img in TimgList">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :hide-after="2000"
                  :content="img.name"
                  placement="bottom-start">
                <li tabindex="0" class="el-upload-list__item is-ready"
                    v-if="img.type=='docx'|img.type=='doc'|img.type=='xls'|img.type=='xlsx'">
                  <div class="demo-image__preview el-upload-list__item-thumbnail">
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="img.fileImgUrl[0]"
                      :preview-src-list="img.fileImgUrl">
                    </el-image>
                    <span class="test" @click="fileDonwload(img.url)">
                      <i class="el-icon-download"></i>
                    </span>
                  </div>
                </li>
              </el-tooltip>
              </span>
            </ul>
          </span>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-card>
            <el-form ref="form" :model="form" label-width="80px" label-position="top" style="margin-top: 10px">
              <el-form-item label="老师评语：">
                <el-input type="textarea" v-model="form.teaDesc"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-col>
      <el-col :offset="1" :span="11">
        <el-row class="uplold">
          <el-col :span="24" class="row">
            <el-card class="box-card" shadow="never">
              <div v-if="imgList.length <= 0" style="text-align: center;font-size: 15px;color: #8c939d">暂无添加任何文件</div>
              <div slot="header" class="clearfix">
                <span>学生附件</span>
                <el-button style="float: right; padding: 3px 0" type="text" @click="allFileDown('2')">全部下载</el-button>
              </div>
              <!--        图片-->
              <ul class="el-upload-list el-upload-list--picture-card">
                <span v-for="img in imgList">
            <el-tooltip
              class="item"
              effect="light"
              :hide-after="2000"
              :content="img.name"
              placement="bottom-start">
            <li tabindex="0" class="el-upload-list__item is-ready"
                v-if="img.type=='jpg'|img.type=='png'|img.type=='jpeg'">
              <img class="el-upload-list__item-thumbnail" :src="img.url">
              <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="imgCheck(img.url)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span class="el-upload-list__item-delete" @click="imgDonwload(img.url)">
                    <i class="el-icon-download"></i>
                  </span>
              </span>
            </li></el-tooltip>
          </span>
              </ul>
              <!--        文件file-->
              <span class="file_card">
            <ul class="el-upload-list el-upload-list--picture-card">
              <span v-for="img in imgList">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :hide-after="2000"
                  :content="img.name"
                  placement="bottom-start">
                <li tabindex="0" class="el-upload-list__item is-ready"
                    v-if="img.type=='docx'|img.type=='doc'|img.type=='xls'|img.type=='xlsx'">
                  <div class="demo-image__preview el-upload-list__item-thumbnail">
                    <el-image
                      style="width: 100px; height: 100px"
                      :src="img.fileImgUrl[0]"
                      :preview-src-list="img.fileImgUrl">
                    </el-image>
                    <span class="test" @click="fileDonwload(img.url)">
                      <i class="el-icon-download"></i>
                    </span>
                  </div>
                </li>
              </el-tooltip>
              </span>
            </ul>
          </span>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
            </el-card>
            <el-form ref="form" :model="form" label-width="80px" label-position="top" style="margin-top: 10px">
              <el-form-item label="学生回答：">
                <el-input type="textarea" v-model="form.stuDesc"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </el-row>
</template>

<script>
    export default {
        name: "PublishTask",
        data() {
            return {
                userinfo: this.UserInfo.getUserInfo(),
                title_content: "提交内容：" + JSON.parse(decodeURIComponent(this.$route.query.id)).content + " ——— 要求：" + JSON.parse(decodeURIComponent(this.$route.query.id)).ask + "",
                saveLoading: false,
                tea_id: this.UserInfo.getUserInfo().id,
                fileList: [],
                uploadUrl: this.URL.api + "upload/file",//this.URL.api +
                UploadFileList: "",
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                TimgList: [],
                imgList: [],
                imgList2: [],
                form: {
                    stuDesc: "stu",
                    teaDesc: "tea"
                },
                stuFileList: [],
                allData: [],
                allId: [],
            }
        },
        methods: {
            goBack() {
                console.log('go back');
                this.$router.go(-1)
                //this.$router.push({name: 'addTopic', params: {act: "3"}});
                // this.$router.push({
                //     path: '/student/graduationproject/viewtasks',
                //     query: {
                //         id: this.$route.query.all,
                //     }
                // })
            },
            MyMessage(msg, type) {
                this.$message({
                    message: msg,
                    type: type
                });
            },
            imgDonwload: function (img) {
                //console.log("imgDonwload:" + img);
                window.location.href = this.URL.api + "upload/testDownload?file=" + img;
            },
            imgCheck(img) {
                //console.log("imgCheck:" + img)
                this.dialogImageUrl = img;
                this.dialogVisible = true;
            },
            fileDonwload(img) {
                //console.log("fileDonwload:" + img)
                window.location.href = img;
            },
            selAllFileImg1() {
                var self = this;
                self.$http.post(self.URL.api + "upload/selFileUrlByTaskId", self.qs.stringify({
                    userId: this.allId.teaId,
                    taskId: this.allId.id
                }))
                    .then(function (response) {
                        console.log(response.data.data)
                        self.TimgList = response.data.data
                    })
                    .catch(function (error) {

                    });
            },
            selAllFileImg: function () {
                var self = this;
                self.$http.post(self.URL.api + "upload/selAllFileUrlByUserId", self.qs.stringify({
                    userId: this.allData.studentsDoTask.stuId,
                    taskId: this.allData.studentsDoTask.id
                }))
                    .then(function (response) {
                        console.log(response)
                        self.imgList = response.data.data
                    })
                    .catch(function (error) {

                    });
            },
            selStuTask() {
                var self = this;
                self.$http.post(self.URL.api + "studentsDoTasks/selStuTaskById", self.qs.stringify({
                    id: this.allData.studentsDoTask.id
                }))
                    .then(function (response) {
                        console.log(response.data.data.stuRemarks)
                        console.log(response.data.data.teaRemarks)
                        self.form.stuDesc = response.data.data.stuRemarks;
                        self.form.teaDesc = response.data.data.teaRemarks;
                    })
                    .catch(function (error) {

                    });
            },
            allFileDown(flag) {
                if(flag=="1"){
                    window.location.href = this.URL.api + "upload/Downloadbatch/" +this.allId.teaId + "/" + this.allId.id + "/任务附件"
                }
                if(flag=="2"){
                    window.location.href = this.URL.api + "upload/Downloadbatch/" +this.allData.studentsDoTask.stuId + "/" + this.allData.studentsDoTask.id + "/学生附件"
                }
            },
        },
        mounted: function () { //mounted　表示这个 Vue 对象加载成功了
            this.allData = JSON.parse(decodeURIComponent(this.$route.query.row));
            this.allId = JSON.parse(decodeURIComponent(this.$route.query.id));
            console.log(this.allData);
            console.log(this.allId);
            if (this.allData.studentsDoTask == undefined) {
                this.goBack();
            } else {
                // this.data = this.$route.query.id;
                // console.log(this.$route.query.id);
                // console.log(this.$route.query.row);
                // console.log(this.$route.query.row.studentsDoTask.id);
                this.selAllFileImg1();
                this.selAllFileImg();
                this.selStuTask();
            }
            // console.log(this.$route.query.id);
            // console.log(this.$route.query.row);
        }
    }
</script>

<style scoped>

  .row >>> .el-divider--horizontal {
    margin: 10px 0;
  }

  .row >>> .el-card__header {
    padding: 8px 24px;
  }

  .row >>> .el-card {
    margin-top: 15px;
  }

  .row >>> .el-upload-list__item {
    width: 100px;
    height: 100px;
  }

  .row >>> .el-upload--picture-card {
    width: 100px;
    height: 100px;
    line-height: 100px;
  }

  .uplold >>> .el-upload-list__item {
    transition: none;
  }

  .file_card >>> .el-upload-list__item-actions {
    height: 20%;
    font-size: 10px;
  }

  .file_card >>> .el-upload-list__item-thumbnail:hover .test {
    opacity: 1;
  }

  .test {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    opacity: 0;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    line-height: 20px;
  }

  .content {
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 30px;
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    z-index: 9999;
  }

  .row >>> .el-form-item__label {
    padding: 0px;
  }
</style>
